<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Ubold - Responsive Admin Dashboard Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
        <meta content="Coderthemes" name="author" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <link rel="shortcut icon" href="../static/images/favicon.ico">

        <link href="../static/plugins/cropper/cropper.css" rel="stylesheet" type="text/css" />

        <!-- App css -->
        <link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="../static/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="../static/css/style.css" rel="stylesheet" type="text/css" />

        <script src="../static/js/modernizr.min.js"></script>

    </head>


    <body>


        <!-- Navigation Bar-->
        <header id="topnav">
            <div class="topbar-main">
                <div class="container-fluid">

                    <!-- Logo container-->
                    <div class="logo">
                        <!-- Text Logo -->
                        <!--<a href="index.html" class="logo">-->
                        <!--UBold-->
                        <!--</a>-->
                        <!-- Image Logo -->
                        <a href="index.html" class="logo">
                            <img src="../static/images/logo_dark.png" alt="" height="20" class="logo-lg">
                            <img src="../static/images/logo_sm.png" alt="" height="24" class="logo-sm">
                        </a>

                    </div>
                    <!-- End Logo container-->


                    <div class="menu-extras topbar-custom">

                        <ul class="list-inline float-right mb-0">

                            <li class="menu-item list-inline-item">
                                <!-- Mobile menu toggle-->
                                <a class="navbar-toggle nav-link">
                                    <div class="lines">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </div>
                                </a>
                                <!-- End mobile menu toggle-->
                            </li>
                            <li class="list-inline-item dropdown notification-list">
                                <a class="nav-link dropdown-toggle arrow-none waves-light waves-effect" data-toggle="dropdown" href="#" role="button"
                                   aria-haspopup="false" aria-expanded="false">
                                    <i class="dripicons-bell noti-icon"></i>
                                    <span class="badge badge-pink noti-icon-badge">4</span>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-lg" aria-labelledby="Preview">
                                    <!-- item-->
                                    <div class="dropdown-item noti-title">
                                        <h5><span class="badge badge-danger float-right">5</span>Notification</h5>
                                    </div>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-success"><i class="icon-bubble"></i></div>
                                        <p class="notify-details">Robert S. Taylor commented on Admin<small class="text-muted">1 min ago</small></p>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-info"><i class="icon-user"></i></div>
                                        <p class="notify-details">New user registered.<small class="text-muted">1 min ago</small></p>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-danger"><i class="icon-like"></i></div>
                                        <p class="notify-details">Carlos Crouch liked <b>Admin</b><small class="text-muted">1 min ago</small></p>
                                    </a>

                                    <!-- All-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item notify-all">
                                        View All
                                    </a>

                                </div>
                            </li>

                            <li class="list-inline-item dropdown notification-list">
                                <a class="nav-link dropdown-toggle waves-effect waves-light nav-user" data-toggle="dropdown" href="#" role="button"
                                   aria-haspopup="false" aria-expanded="false">
                                    <img src="../static/images/users/avatar-1.jpg" alt="user" class="rounded-circle">
                                </a>
                                <div class="dropdown-menu dropdown-menu-right profile-dropdown " aria-labelledby="Preview">
                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <i class="md md-account-circle"></i> <span>Profile</span>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <i class="md md-settings"></i> <span>Settings</span>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <i class="md md-lock-open"></i> <span>Lock Screen</span>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <i class="md md-settings-power"></i> <span>Logout</span>
                                    </a>

                                </div>
                            </li>

                        </ul>
                    </div>
                    <!-- end menu-extras -->

                    <div class="clearfix"></div>

                </div> <!-- end container -->
            </div>
            <!-- end topbar-main -->

            <div class="navbar-custom">
                <div class="container-fluid">
                    <div id="navigation">
                        <!-- Navigation Menu-->
                        <ul class="navigation-menu">

                            <li class="has-submenu">
                                <a href="#"><i class="md md-dashboard"></i>Dashboard</a>
                                <ul class="submenu">
                                    <li>
                                        <a href="index.html">Dashboard 01</a>
                                    </li>
                                    <li>
                                        <a href="dashboard_2.html">Dashboard 02</a>
                                    </li>
                                    <li>
                                        <a href="dashboard_3.html">Dashboard 03</a>
                                    </li>
                                    <li>
                                        <a href="dashboard_4.html">Dashboard 04</a>
                                    </li>
                                </ul>
                            </li>

                            <li class="has-submenu">
                                <a href="#"><i class="md md-color-lens"></i>UI Kit</a>
                                <ul class="submenu">
                                    <li><a href="ui-buttons.html">Buttons</a></li>
                                    <li><a href="ui-loading-buttons.html">Loading Buttons</a></li>
                                    <li><a href="ui-cards.html">Cards</a></li>
                                    <li><a href="ui-portlets.html">Portlets</a></li>
                                    <li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
                                    <li><a href="ui-tabs.html">Tabs</a></li>
                                    <li><a href="ui-modals.html">Modals</a></li>
                                    <li><a href="ui-progressbars.html">Progress Bars</a></li>
                                    <li><a href="ui-notification.html">Notification</a></li>
                                    <li><a href="ui-images.html">Images</a></li>
                                    <li><a href="ui-carousel.html">Carousel</a>
                                    <li><a href="ui-video.html">Video</a>
                                    <li><a href="ui-bootstrap.html">Bootstrap UI</a></li>
                                    <li><a href="ui-typography.html">Typography</a></li>
                                </ul>
                            </li>

                            <li class="has-submenu">
                                <a href="#"><i class="md md-layers"></i>Components</a>
                                <ul class="submenu megamenu">
                                    <li>
                                        <ul>
                                            <li>
                                                <span>Elements</span>
                                            </li>
                                            <li><a href="components-grid.html">Grid</a></li>
                                            <li><a href="components-widgets.html">Widgets</a></li>
                                            <li><a href="components-nestable-list.html">Nesteble</a></li>
                                            <li><a href="components-range-sliders.html">Range sliders</a></li>
                                            <li><a href="components-masonry.html">Masonry</a></li>
                                            <li><a href="components-animation.html">Animation</a></li>
                                            <li><a href="components-sweet-alert.html">Sweet Alerts</a></li>
                                            <li><a href="components-sweet-alert_2.html">Sweet Alert 2</a></li>
                                            <li><a href="components-treeview.html">Tree view</a></li>
                                            <li><a href="components-tour.html">Tour</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <ul>
                                            <li>
                                                <span>Forms</span>
                                            </li>
                                            <li><a href="form-elements.html">General Elements</a></li>
                                            <li><a href="form-advanced.html">Advanced Form</a></li>
                                            <li><a href="form-validation.html">Form Validation</a></li>
                                            <li><a href="form-pickers.html">Form Pickers</a></li>
                                            <li><a href="form-wizard.html">Form Wizard</a></li>
                                            <li><a href="form-image-crop.html">Image Crop</a></li>
                                        </ul>
                                    </li>

                                    <li>
                                        <ul>
                                            <li>
                                                <span>Forms</span>
                                            </li>
                                            <li><a href="form-mask.html">Form Masks</a></li>
                                            <li><a href="form-summernote.html">Summernote</a></li>
                                            <li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
                                            <li><a href="form-code-editor.html">Code Editor</a></li>
                                            <li><a href="form-uploads.html">Multiple File Upload</a></li>
                                            <li><a href="form-xeditable.html">X-editable</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li class="has-submenu">
                                <a href="#"><i class="md md-class"></i>Other</a>
                                <ul class="submenu">
                                    <li class="has-submenu">
                                        <a href="#">Tables</a>
                                        <ul class="submenu">
                                            <li><a href="tables-basic.html">Basic Tables</a></li>
                                            <li><a href="tables-datatable.html">Data Table</a></li>
                                            <li><a href="tables-editable.html">Editable Table</a></li>
                                            <li><a href="tables-responsive.html">Responsive Table</a></li>
                                            <li><a href="tables-foo-tables.html">FooTable</a></li>
                                            <li><a href="tables-bootstrap.html">Bootstrap Tables</a></li>
                                            <li><a href="tables-tablesaw.html">Tablesaw Tables</a></li>
                                            <li><a href="tables-jsgrid.html">JsGrid Tables</a></li>
                                        </ul>
                                    </li>
                                    <li class="has-submenu">
                                        <a href="#">Charts</a>
                                        <ul class="submenu">
                                            <li><a href="chart-flot.html">Flot Chart</a></li>
                                            <li><a href="chart-morris.html">Morris Chart</a></li>
                                            <li><a href="chart-chartjs.html">Chartjs</a></li>
                                            <li><a href="chart-peity.html">Peity Charts</a></li>
                                            <li><a href="chart-chartist.html">Chartist Charts</a></li>
                                            <li><a href="chart-c3.html">C3 Charts</a></li>
                                            <li><a href="chart-nvd3.html"> Nvd3 Charts</a></li>
                                            <li><a href="chart-sparkline.html">Sparkline charts</a></li>
                                            <li><a href="chart-radial.html">Radial charts</a></li>
                                            <li><a href="chart-other.html">Other Chart</a></li>
                                            <li><a href="chart-ricksaw.html">Ricksaw Chart</a></li>
                                        </ul>
                                    </li>
                                    <li class="has-submenu">
                                        <a href="#">Icons</a>
                                        <ul class="submenu">
                                            <li><a href="icons-materialdesign.html">Material Design</a></li>
                                            <li><a href="icons-ionicons.html">Ion Icons</a></li>
                                            <li><a href="icons-fontawesome.html">Font awesome</a></li>
                                            <li><a href="icons-themifyicon.html">Themify Icons</a></li>
                                            <li><a href="icons-simple-line.html">Simple line Icons</a></li>
                                            <li><a href="icons-weather.html">Weather Icons</a></li>
                                            <li><a href="icons-typicons.html">Typicons</a></li>
                                            <li><a href="icons-dripicons.html">Dripicons</a></li>
                                        </ul>
                                    </li>
                                    <li class="has-submenu">
                                        <a href="#">Maps</a>
                                        <ul class="submenu">
                                            <li><a href="map-google.html"> Google Map</a></li>
                                            <li><a href="map-vector.html"> Vector Map</a></li>
                                        </ul>
                                    </li>
                                    <li class="has-submenu">
                                        <a href="#">Email</a>
                                        <ul class="submenu">
                                            <li><a href="email-inbox.html"> Inbox</a></li>
                                            <li><a href="email-read.html"> Read Mail</a></li>
                                            <li><a href="email-compose.html"> Compose Mail</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li class="has-submenu">
                                <a href="#"><i class="md md-pages"></i>Pages</a>
                                <ul class="submenu megamenu">
                                    <li>
                                        <ul>
                                            <li><a href="page-starter.html">Starter Page</a></li>
                                            <li><a href="page-login.html">Login</a></li>
                                            <li><a href="page-login-v2.html">Login v2</a></li>
                                            <li><a href="page-register.html">Register</a></li>
                                            <li><a href="page-register-v2.html">Register v2</a></li>
                                            <li><a href="page-signup-signin.html">Signin - Signup</a></li>
                                            <li><a href="page-recoverpw.html">Recover Password</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <ul>
                                            <li><a href="page-lock-screen.html">Lock Screen</a></li>
                                            <li><a href="page-400.html">Error 400</a></li>
                                            <li><a href="page-403.html">Error 403</a></li>
                                            <li><a href="page-404.html">Error 404</a></li>
                                            <li><a href="page-404_alt.html">Error 404-alt</a></li>
                                            <li><a href="page-500.html">Error 500</a></li>
                                            <li><a href="page-503.html">Error 503</a></li>
                                        </ul>
                                    </li>

                                </ul>
                            </li>

                            <li class="has-submenu">
                                <a href="#"><i class="md md-folder-special"></i>Extras</a>
                                <ul class="submenu megamenu">
                                    <li>
                                        <ul>
                                            <li><a href="extra-profile.html">Profile</a></li>
                                            <li><a href="extra-timeline.html">Timeline</a></li>
                                            <li><a href="extra-sitemap.html">Site map</a></li>
                                            <li><a href="extra-invoice.html">Invoice</a></li>
                                            <li><a href="extra-email-template.html">Email template</a></li>
                                            <li><a href="extra-maintenance.html">Maintenance</a></li>
                                            <li><a href="extra-coming-soon.html">Coming-soon</a></li>
                                            <li><a href="extra-gallery_2.html">Gallery 2</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <ul>
                                            <li><a href="extra-faq.html">FAQ</a></li>
                                            <li><a href="extra-search-result.html">Search result</a></li>
                                            <li><a href="extra-gallery.html">Gallery</a></li>
                                            <li><a href="extra-pricing.html">Pricing</a></li>
                                            <li><a href="apps-calendar.html"> Calendar</a></li>
                                            <li><a href="apps-contact.html"> Contact</a></li>
                                            <li><a href="apps-taskboard.html"> Taskboard</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li class="has-submenu">
                                <a href="#"><i class="md md-account-circle"></i>CRM</a>
                                <ul class="submenu">
                                    <li><a href="crm-dashboard.html"> Dashboard </a></li>
                                    <li><a href="crm-contact.html"> Contacts </a></li>
                                    <li><a href="crm-opportunities.html"> Opportunities </a></li>
                                    <li><a href="crm-leads.html"> Leads </a></li>
                                    <li><a href="crm-customers.html"> Customers </a></li>
                                </ul>
                            </li>

                            <li class="has-submenu">
                                <a href="#"><i class="md md-shopping-cart"></i>eCommerce</a>
                                <ul class="submenu">
                                    <li><a href="ecommerce-dashboard.html"> Dashboard</a></li>
                                    <li><a href="ecommerce-products.html"> Products</a></li>
                                    <li><a href="ecommerce-product-detail.html"> Product Detail</a></li>
                                    <li><a href="ecommerce-product-edit.html"> Product Edit</a></li>
                                    <li><a href="ecommerce-orders.html"> Orders</a></li>
                                    <li><a href="ecommerce-sellers.html"> Sellers</a></li>
                                </ul>
                            </li>

                        </ul>
                        <!-- End navigation menu -->
                    </div> <!-- end #navigation -->
                </div> <!-- end container -->
            </div> <!-- end navbar-custom -->
        </header>
        <!-- End Navigation Bar-->


        <div class="wrapper">
            <div class="container-fluid">

                <!-- Page-Title -->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-title-box">
                            <div class="btn-group pull-right">
                                <ol class="breadcrumb hide-phone p-0 m-0">
                                    <li class="breadcrumb-item"><a href="#">Ubold</a></li>
                                    <li class="breadcrumb-item"><a href="#">Forms</a></li>
                                    <li class="breadcrumb-item active">Image Crop</li>
                                </ol>
                            </div>
                            <h4 class="page-title">Image Crop</h4>
                        </div>
                    </div>
                </div>
                <!-- end page title end breadcrumb -->


                <div class="row">
                    <div class="col-lg-8">
                        <div class="card-box">
                            <h4 class="m-t-0 m-b-30 header-title"><b>Heading</b></h4>

                            <div>
                                <img class="cropper" src="../static/images/big/img1.jpg" alt="Picture">
                            </div>

                            <hr>

                            <ul class="list-unstyled list-inline showcase-btn">
                                <li class="list-inline-item"><button id="reset" type="button" class="btn btn-warning waves-effect waves-light m-t-10">Reset</button></li>
                                <li class="list-inline-item"><button id="reset2" type="button" class="btn  btn-warning waves-effect waves-light m-t-10">Reset (deep)</button></li>
                                <li class="list-inline-item"><button id="clear" type="button" class="btn btn-primary waves-effect waves-light m-t-10">Release</button></li>
                                <li class="list-inline-item"><button id="destroy" type="button" class="btn btn-danger waves-effect waves-light m-t-10">Destroy</button></li>
                                <li class="list-inline-item"><button id="enable" type="button" class="btn btn-success waves-effect waves-light m-t-10">Enable</button></li>
                                <li class="list-inline-item"><button id="disable" type="button" class="btn btn-warning waves-effect waves-light m-t-10">Disable</button></li>
                                <li class="list-inline-item"><button id="zoomIn" type="button" class="btn btn-info waves-effect waves-light m-t-10">Zoom In</button></li>
                                <li class="list-inline-item"><button id="zoomOut" type="button" class="btn btn-info waves-effect waves-light m-t-10">Zoom Out</button></li>
                                <li class="list-inline-item"><button id="rotateLeft" type="button" class="btn btn-info waves-effect waves-light m-t-10">Rotate Left</button></li>
                                <li class="list-inline-item"><button id="rotateRight" type="button" class="btn btn-info waves-effect waves-light m-t-10">Rotate Right</button></li>
                                <li class="list-inline-item"><button id="setData" type="button" class="btn btn-primary waves-effect waves-light m-t-10">Set Data</button></li>
                            </ul>
                        </div>

                    </div>

                    <div class="col-lg-4">

                        <div class="card-box">
                            <h4 class="m-t-0 m-b-30 header-title"><b>Preview</b></h4>

                            <div class="preview preview-md"></div>
                            <div class="preview preview-sm"></div>
                            <div class="preview preview-xs"></div>
                            <div class="clearfix"></div>
                        </div>

                        <div class="card-box">
                            <h4 class="m-t-0 m-b-30 header-title"><b>Current Values</b></h4>

                            <div class="row">
                                <div class="col-lg-6 m-t-10">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">X</span>
                                        </div>
                                        <input class="form-control" id="dataX" type="text" placeholder="x">
                                    </div>
                                </div>
                                <div class="col-lg-6 m-t-10">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">Y</span>
                                        </div>
                                        <input class="form-control" id="dataY" type="text" placeholder="y">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 m-t-10">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">W</span>
                                        </div>
                                        <input class="form-control" id="dataWidth" type="text" placeholder="width">
                                    </div>
                                </div>
                                <div class="col-lg-6 m-t-10">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">H</span>
                                        </div>
                                        <input class="form-control" id="dataHeight" type="text" placeholder="height">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 m-t-10">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">Rotate</span>
                                        </div>
                                        <input class="form-control" id="dataRotate" type="text" placeholder="rotate">
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="card-box">
                            <h4 class="m-t-0 m-b-30 header-title"><b>Actions</b></h4>

                            <div class="input-group m-t-10">
                                <div class="input-group-prepend">
                                    <button class="btn btn-info waves-effect waves-light" id="getData" type="button">Get Data</button>
                                </div>
                                <input class="form-control" id="showData" type="text">
                            </div>


                            <div class="input-group m-t-15">
                                <div class="input-group-prepend">
                                    <button class="btn btn-info waves-effect waves-light" id="getImageData" type="button">Get Image Data</button>
                                </div>
                                <input class="form-control" id="showImageData" type="text">
                            </div>

                            <div class="input-group m-t-15">
                                <div class="input-group-prepend">
                                    <button class="btn btn-primary waves-effect waves-light" id="replace" type="button">Replace</button>
                                </div>
                                <input class="form-control" id="replaceWith" type="text" value="../static/images/big/img4.jpg">
                            </div>

                            <div class="input-group m-t-15">
                                <div class="input-group-prepend">
                                    <button class="btn btn-primary waves-effect waves-light" id="setAspectRatio" type="button">Set Aspect Ratio</button>
                                </div>
                                <input class="form-control" id="aspectRatio" name="aspectRatio" type="text" value="auto">
                            </div>

                            <div class="row">
                                <div class="col-lg-6 m-t-15"><button class="btn btn-primary waves-effect waves-light btn-block" id="getDataURL" type="button">Get Data URL</button></div>
                                <div class="col-lg-6 m-t-15"><button class="btn btn-primary waves-effect waves-light btn-block" id="getDataURL2" type="button">Get Data URL (JPG)</button></div>
                            </div>

                            <textarea class="form-control m-t-15" id="dataURL" rows="3"></textarea>

                            <div id="showDataURL" class="m-t-15"></div>
                        </div>


                    </div>

                </div>


            </div> <!-- end container -->
        </div>
        <!-- end wrapper -->


        <!-- Footer -->
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-12 text-center">
                        © 2016 - 2018 UBold - Coderthemes.com
                    </div>
                </div>
            </div>
        </footer>
        <!-- End Footer -->


        <!-- jQuery  -->
        <script src="../static/js/jquery.min.js"></script>
        <script src="../static/js/popper.min.js"></script><!-- Popper for Bootstrap -->
        <script src="../static/js/bootstrap.min.js"></script>
        <script src="../static/js/waves.js"></script>
        <script src="../static/js/jquery.slimscroll.js"></script>
        <script src="../static/js/jquery.scrollTo.min.js"></script>

        <!-- App js -->
        <script src="../static/js/jquery.core.js"></script>
        <script src="../static/js/jquery.app.js"></script>

        <script src="../static/plugins/cropper/cropper.min.js"></script>

        <script>
            $(function() {
                var $cropper = $(".cropper"),
                        $dataX = $("#dataX"),
                        $dataY = $("#dataY"),
                        $dataHeight = $("#dataHeight"),
                        $dataWidth = $("#dataWidth"),
                        $dataRotate = $("#dataRotate"),
                        console = window.console || {log:$.noop},
                        cropper;

                $cropper.cropper({
                    aspectRatio: 16 / 9,
                    data: {
                        x: 420,
                        y: 50,
                        width: 640,
                        height: 360
                    },
                    preview: ".preview",

                    // autoCrop: false,
                    // dragCrop: false,
                    // modal: false,
                    // moveable: false,
                    // resizeable: false,
                    // scalable: false,

                    // maxWidth: 480,
                    // maxHeight: 270,
                    // minWidth: 160,
                    // minHeight: 90,

                    done: function(data) {
                        $dataX.val(data.x);
                        $dataY.val(data.y);
                        $dataHeight.val(data.height);
                        $dataWidth.val(data.width);
                        $dataRotate.val(data.rotate);
                    },
                    build: function(e) {
                        console.log(e.type);
                    },
                    built: function(e) {
                        console.log(e.type);
                    },
                    dragstart: function(e) {
                        console.log(e.type);
                    },
                    dragmove: function(e) {
                        console.log(e.type);
                    },
                    dragend: function(e) {
                        console.log(e.type);
                    }
                });

                cropper = $cropper.data("cropper");

                $cropper.on({
                    "build.cropper": function(e) {
                        console.log(e.type);
                        // e.preventDefault();
                    },
                    "built.cropper": function(e) {
                        console.log(e.type);
                        // e.preventDefault();
                    },
                    "dragstart.cropper": function(e) {
                        console.log(e.type);
                        // e.preventDefault();
                    },
                    "dragmove.cropper": function(e) {
                        console.log(e.type);
                        // e.preventDefault();
                    },
                    "dragend.cropper": function(e) {
                        console.log(e.type);
                        // e.preventDefault();
                    }
                });

                $("#reset").click(function() {
                    $cropper.cropper("reset");
                });

                $("#reset2").click(function() {
                    $cropper.cropper("reset", true);
                });

                $("#clear").click(function() {
                    $cropper.cropper("clear");
                });

                $("#destroy").click(function() {
                    $cropper.cropper("destroy");
                });

                $("#enable").click(function() {
                    $cropper.cropper("enable");
                });

                $("#disable").click(function() {
                    $cropper.cropper("disable");
                });

                $("#zoomIn").click(function() {
                    $cropper.cropper("zoom", 0.1);
                });

                $("#zoomOut").click(function() {
                    $cropper.cropper("zoom", -0.1);
                });

                $("#rotateLeft").click(function() {
                    $cropper.cropper("rotate", -90);
                });

                $("#rotateRight").click(function() {
                    $cropper.cropper("rotate", 90);
                });

                $("#setAspectRatio").click(function() {
                    $cropper.cropper("setAspectRatio", $("#aspectRatio").val());
                });

                $("#replace").click(function() {
                    $cropper.cropper("replace", $("#replaceWith").val());
                });

                $("#getImageData").click(function() {
                    $("#showImageData").val(JSON.stringify($cropper.cropper("getImageData")));
                });

                $("#setData").click(function() {
                    $cropper.cropper("setData", {
                        x: $dataX.val(),
                        y: $dataY.val(),
                        width: $dataWidth.val(),
                        height: $dataHeight.val(),
                        rotate: $dataRotate.val()
                    });
                });

                $("#getData").click(function() {
                    $("#showData").val(JSON.stringify($cropper.cropper("getData")));
                });

                $("#getDataURL").click(function() {
                    var dataURL = $cropper.cropper("getDataURL");

                    $("#dataURL").text(dataURL);
                    $("#showDataURL").html('<img src="' + dataURL + '">');
                });

                $("#getDataURL2").click(function() {
                    var dataURL = $cropper.cropper("getDataURL", "image/jpeg");

                    $("#dataURL").text(dataURL);
                    $("#showDataURL").html('<img src="' + dataURL + '">');
                });
            });

        </script>

    </body>
</html>